22 좋아요 디바운스 적용 | ✅ 편저: 코담 운영자

22강 - 좋아요 기능: JS에서 HTML 조작 및 디바운스 적용

기능 - JS로 HTML 다루기

---

✨ 이번 강의 목표

• JavaScript에서 HTML 요소를 조작하여 좋아요 버튼을 구현
• debounce 함수를 적용하여 연속 클릭 방지
• Ajax 요청으로 서버와 통신하여 좋아요 상태 업데이트

---

1. Debounce 함수 적용

빠르게 연속 클릭 시 서버에 여러 요청이 발생하지 않도록, debounce(디바운스)를 적용합니다.

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

✅ 설명:

• 사용자가 버튼 클릭 시, 이전 타이머를 제거(clearTimeout)
• delay 시간이 지나면 콜백 함수 실행
• delay 안에 또 클릭하면 이전 타이머 제거되고 새 타이머 설정 → 중복 요청 방지

---

2. 좋아요 버튼 클릭 핸들러 (Ajax 기반)

파일: static/js/posts/loadMorePosts.js

async function handleLikeClick(postId, csrfToken, target) {
  const likeButton = target;
  if (likeButton.disabled) return;
  likeButton.disabled = true;

  try {
    const response = await fetch(`/api/posts/${postId}/like/`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken
      },
    });
    
    const data = await response.json();
    const iTag = likeButton.querySelector("i");

    if (data.liked) {
      iTag.classList.replace("fa-heart-o", "fa-heart");
      iTag.classList.replace("text-gray-500", "text-red-500");
    } else {
      iTag.classList.replace("fa-heart", "fa-heart-o");
      iTag.classList.replace("text-red-500", "text-gray-500");
    }

    likeButton.querySelector("#like-count-" + postId).innerText = data.like_count;
  } catch (error) {
    console.error("Error liking post:", error);
  } finally {
    likeButton.disabled = false;
  }
}

const debouncedHandleLikeClick = debounce(handleLikeClick, 300);

• debounce로 감싼 후 debouncedHandleLikeClick을 HTML에서 이벤트에 연결합니다.
• 서버 응답에 따라 하트 아이콘 스타일을 변경하고 좋아요 수 업데이트

---

3. HTML에서 좋아요 버튼 적용

<!-- 좋아요 버튼 -->
<div class="flex items-center space-x-3"
     id="like-button-${post.id}"
     onclick="debouncedHandleLikeClick('${post.id}', '${post.csrf_token}', this)">
  ${post.image_likes.includes(Number(loginUser.id)) ?
    `<i class="fa fa-heart fa-2x text-red-500  cursor-pointer hover:text-red-500"></i>` :
    `<i class="fa fa-heart-o fa-2x text-gray-500 cursor-pointer hover:text-red-500"></i>`
  }
  (<span id="like-count-${post.id}" class="mx-0 !mx-0">${post.image_likes.length}</span>)
</div>

• 클릭 시 Ajax로 좋아요 상태 변경 요청
• 로그인한 사용자가 이미 좋아요 눌렀는지 확인 후 UI 분기
• 좋아요 수와 하트 색상 실시간 반영

---

✅ 정리

• debounce()를 사용해 좋아요 요청 중복 방지
• handleLikeClick() 함수에서 Ajax 요청 후 UI 동기화
• HTML 구조에 onclick="debouncedHandleLikeClick(...)" 적용
• 사용자 경험을 해치지 않으며 서버 부담도 줄이는 구조 구성

👉 다음 강의는 Ajax 호출과 함께 CSRF 토큰을 처리하여 보안까지 강화하는 방식으로 이어집니다.